<template>
  <section  class="component manual-tag-set">
    <!-- <el-form :model="model" :rules="rules" label-width="100px" >
      <el-form-item label="已有标识" prop="name">
        <el-tag v-for="item in hasTag" :key="item.id" closable @close="tagDel(item)">{{ item.name }}</el-tag>
      </el-form-item>
      <el-form-item label="新增标识" prop="name">
        <el-select clearable placeholder="请选择" v-model="model.leaveCaseFlag" multiple class="select">
          <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in selectTag"></el-option>
        </el-select>
      </el-form-item>
    </el-form> -->
    <el-checkbox-group v-model="model.leaveCaseFlag">
      <el-checkbox :label="item.name" v-for="item in selectTag" :key="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <div class="confirm-button">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="onClickCommit">保存</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop, Watch } from 'vue-property-decorator'
import { Auth, Layout, Dependencies } from "~/core/decorator";
import TagComponent from './tag-component.vue'
import { State, namespace } from "vuex-class";
import { CodePrarmeterService } from "~/services/management-service/code-prarmeter.service";
import { CaseInfoService } from "~/services/domain-service/case-info.service";

const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {
    TagComponent
  }
})
export default class ManualTagSet extends Vue {
  @Dependencies(CodePrarmeterService) private CodePrarmeterService: CodePrarmeterService;
  @Dependencies(CaseInfoService) private CaseInfoService: CaseInfoService;
  @CollectionExecutionModule.State private caseId;

  private model:any = {
    leaveCaseFlag: []
  }
  private rules:any = {}
  private get hasTag() {
    return this.selectTag.filter(e => this.model.leaveCaseFlag.includes(e.id))
  }
  @Prop() private selectTag
  @Prop() private dialogStatus
  @Emit('close') private emitClose() {}
  @Watch('dialogStatus', { immediate: true }) private tagFlash() {
    if(this.dialogStatus) {
      this.CaseInfoService.getCaseInfoRecordById({ caseInfoRecordId: this.caseId }).subscribe(data => {
        this.model.leaveCaseFlag = []
        const handWorkName = data.handWorkCodeResponse
        handWorkName.forEach(e => {
          this.model.leaveCaseFlag.push(e.handWorkName)
        });
      })
    }
  }

  private tagDel(tag) {
    this.model.leaveCaseFlag.splice(this.model.leaveCaseFlag.findIndex(item => item === tag.id), 1)
  }

  /**
   * 提交
   */
  private onClickCommit() {
    this.CaseInfoService.caseInfoHandWorkCode({
      caseInfoRecordId: this.caseId,
      // handworkCode: this.model.leaveCaseFlag.length === 0 ? null : JSON.stringify(this.model.leaveCaseFlag)
      handworkCode: this.model.leaveCaseFlag.length === 0 ? null : this.model.leaveCaseFlag.toString() 
    }).subscribe(data => {
      this.$message.success('保存成功')
      this.emitClose()
    }, err => {
      this.$message.success('保存失败')
    })
  }
}
</script>
<style lang="less" >
 .manual-tag-set .select{
  width: 400px;
  /*deep*/.el-input{
    width: 100% !important;
  }
}
</style>